<template>
  <div class="Lendheader">
    <!-- 搜索部分 -->
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="formInline"
      :rules="rules"
    >
      <el-row :style="{paddingBottom: 0}">
        <el-col :span="24">
          <el-form-item :label="$t('toolingBarcode')" prop="toolingBarcode">
            <el-input
              v-model="formInline.toolingBarcode"
              clearable
              @keydown.enter.native="onEnter"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-show="resultData.id" :span="24">
          <el-form-item :label="$t('lendToId')" prop="lendTo">
            <el-input
              v-model="formInline.lendTo"
              clearable
            />
          </el-form-item>
          <el-form-item
            v-show="flagMode !== 2"
            :label="$t('eqpName')"
            :required="flagMode === 1?true:false"
            prop="eqpname">
            <el-select v-model="formInline.eqpname" clearable filterable>
              <el-option
                v-for="item in eqpNameList"
                :key="item.id"
                :value="item.name"
                :label="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('lendRemark')" prop="lendRemark">
            <el-input
              v-model="formInline.lendRemark"
              :rows="2"
              type="textarea"
              maxlength="200"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import eqpbase from '@/api/equipment/eqpbase'
export default {
  name: 'WorkRecordHeader',
  props: {
    resultData: {
      type: Object,
      default: () => ({})
    },
    flagMode: {
      type: String | Number,
      default: 0
    }
  },
  data() {
    const checkEqpName = (rule, value, callback) => {
      if (this.flagMode === 1 && !value) {
        callback(new Error(this.$t('warnMarginEqpId')))
      } else {
        callback()
      }
    }
    return {
      formInline: {},
      eqpNameList: [], // 设备列表
      rules: {
        eqpname: [{ validator: checkEqpName, trigger: 'change' }],
        lendTo: [{ required: true, message: this.$t('PleaseInputLendId'), trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getEqpNameList()
  },
  methods: {
    // 获取设备名称
    getEqpNameList() {
      eqpbase.eqpnamelist().then(res => {
        this.eqpNameList = res.data
      })
    },
    // 键盘enter键
    async onEnter() {
      // 防止数据先被置空
      await this.$emit('onEnter', this.formInline)
      this.formInline.toolingBarcode = ''
    },
    // 清空表单
    clearAllForm() {
      this.formInline = {}
      this.$refs['ruleForm'].clearValidate()
    }
  }
}
</script>
<style lang="scss" scoped>
.Lendheader {
  padding: 10px 30px 0 30px;
}
</style>
